<template>
  <section>
    <img class="bg" src="/static/images/pic3.png" alt="">
    <h3>{{question.questionName}}</h3>
    <div>
      <textarea id="write" type="text" placeholder="请填写意见，最多50个字" :maxlength="200"></textarea>
    </div>
    <button class="submit" @click="next">提交</button>    
  </section>
</template>

<script>
export default {
  name: 'question',
  data () {
    return {
      title: 'type7'
    }
  },
  props: [
    'question'
  ],
  methods: {
    next () {
      var content1 = document.getElementById('write').value
      let resultData = {
        content: content1,
        optionId: 0,
        optionOrder: 0,
        questionId: this.question.id,
        type: 7
      }
      this.$emit('pushResult', resultData)
      this.$emit('next')
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
h3 {
  font-size: 40px;
  color: #999;
  margin: 30px auto;
  line-height: 60px;  
}
.bg {
  height: 100vw;
  width: 100vw;
}
textarea {
  width: 580px;
  height: 250px;
  border: 4px solid #ddd;
  font-size: 40px;
  color: #999;
  resize: none;
}
.submit {
  background-color: #1435ad;
  width: 280px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #fff;
  margin-top: 40px;
}
</style>
